{% extends "base.html" %}

{% block title %}预订详情 - 风之宿{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <div class="flex justify-between items-center mb-6">
    <h1 class="text-3xl font-bold text-primary">预订详情</h1>
    <a href="{{ url_for('admin.manage_bookings') }}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg transition-colors">
      返回预订列表
    </a>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- 预订信息 -->
    <div class="lg:col-span-2">
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
          <h2 class="text-xl font-semibold text-gray-800">基本信息</h2>
        </div>
        <div class="p-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">预订编号</label>
              <p class="text-gray-900">#{{ booking.id }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">预订状态</label>
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                {% if booking.status == 'confirmed' %}bg-green-100 text-green-800
                {% elif booking.status == 'pending' %}bg-yellow-100 text-yellow-800
                {% elif booking.status == 'cancelled' %}bg-red-100 text-red-800
                {% elif booking.status == 'checked_in' %}bg-blue-100 text-blue-800
                {% elif booking.status == 'checked_out' %}bg-purple-100 text-purple-800
                {% else %}bg-gray-100 text-gray-800{% endif %}">
                {{ booking.status | capitalize }}
              </span>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">创建时间</label>
              <p class="text-gray-900">{{ booking.created_at }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">最后更新</label>
              <p class="text-gray-900">{{ booking.updated_at if booking.updated_at else booking.created_at }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户信息 -->
      <div class="bg-white rounded-lg shadow-md overflow-hidden mt-6">
        <div class="px-6 py-4 border-b border-gray-100">
          <h2 class="text-xl font-semibold text-gray-800">用户信息</h2>
        </div>
        <div class="p-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">用户名</label>
              <p class="text-gray-900">{{ booking.username }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">邮箱</label>
              <p class="text-gray-900">{{ booking.email }}</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">电话</label>
              <p class="text-gray-900">{{ booking.phone }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 房间信息 -->
      <div class="bg-white rounded-lg shadow-md overflow-hidden mt-6">
        <div class="px-6 py-4 border-b border-gray-100">
          <h2 class="text-xl font-semibold text-gray-800">房间信息</h2>
        </div>
        <div class="p-6">
          <div class="flex flex-col md:flex-row gap-6">
            <div class="md:w-1/3">
              <div class="rounded-lg overflow-hidden h-40 bg-gray-100">
                {% if booking.room_image %}
                  <img src="{{ url_for('static', filename='uploads/' + booking.room_image) }}"
                       alt="{{ booking.room_name }}"
                       class="w-full h-full object-cover">
                {% else %}
                  <img src="{{ url_for('static', filename='images/default-room.png') }}"
                       alt="默认房间图片"
                       class="w-full h-full object-cover">
                {% endif %}
              </div>
            </div>
            <div class="md:w-2/3">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-500 mb-1">房间名称</label>
                  <p class="text-gray-900">{{ booking.room_name }}</p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-500 mb-1">房间类型</label>
                  <p class="text-gray-900">
                    {% if booking.room_type == 'standard' %}标准间
                    {% elif booking.room_type == 'deluxe' %}豪华间
                    {% elif booking.room_type == 'suite' %}套房
                    {% elif booking.room_type == 'family' %}家庭房
                    {% elif booking.room_type == 'game' %}电竞房
                    {% else %}{{ booking.room_type }}{% endif %}
                  </p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-500 mb-1">单价</label>
                  <p class="text-gray-900">¥{{ booking.price }}/晚</p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-500 mb-1">入住人数</label>
                  <p class="text-gray-900">{{ booking.guests }}人</p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-500 mb-1">入住日期</label>
                  <p class="text-gray-900">{{ booking.check_in }}</p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-500 mb-1">退房日期</label>
                  <p class="text-gray-900">{{ booking.check_out }}</p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-500 mb-1">入住天数</label>
                  <p class="text-gray-900">
                    {% set nights = (booking.check_out | to_date - booking.check_in | to_date).days %}
                    {{ nights }}晚
                  </p>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-500 mb-1">总价</label>
                  <p class="text-xl font-bold text-primary">¥{{ booking.total_price }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作面板 -->
    <div class="lg:col-span-1">
      <div class="bg-white rounded-lg shadow-md overflow-hidden sticky top-6">
        <div class="px-6 py-4 border-b border-gray-100">
          <h2 class="text-xl font-semibold text-gray-800">操作</h2>
        </div>
        <div class="p-6">
          <form method="POST" action="{{ url_for('admin.update_booking_status', booking_id=booking.id) }}">
            <div class="mb-4">
              <label class="block text-sm font-medium text-gray-700 mb-2">更新状态</label>
              <select name="status" 
                      onchange="this.form.submit()"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary">
                <option value="pending" {% if booking.status == 'pending' %}selected{% endif %}>待确认</option>
                <option value="confirmed" {% if booking.status == 'confirmed' %}selected{% endif %}>已确认</option>
                <option value="checked_in" {% if booking.status == 'checked_in' %}selected{% endif %}>已入住</option>
                <option value="checked_out" {% if booking.status == 'checked_out' %}selected{% endif %}>已退房</option>
                <option value="cancelled" {% if booking.status == 'cancelled' %}selected{% endif %}>已取消</option>
              </select>
            </div>
          </form>

          {% if bill %}
          <div class="border-t border-gray-100 pt-4 mt-4">
            <h3 class="font-medium text-gray-800 mb-2">账单信息</h3>
            <div class="space-y-2 text-sm">
              <div class="flex justify-between">
                <span class="text-gray-600">账单编号:</span>
                <span class="font-medium">#{{ bill.id }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">金额:</span>
                <span class="font-medium text-primary">¥{{ bill.amount }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">状态:</span>
                <span class="font-medium
                  {% if bill.status == 'paid' %}text-green-600
                  {% else %}text-yellow-600{% endif %}">
                  {{ bill.status | capitalize }}
                </span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">创建时间:</span>
                <span class="font-medium">{{ bill.created_at }}</span>
              </div>
              {% if bill.paid_at %}
              <div class="flex justify-between">
                <span class="text-gray-600">支付时间:</span>
                <span class="font-medium">{{ bill.paid_at }}</span>
              </div>
              {% endif %}
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}